import { Button, Cascader, Form, Image, Input, Modal, Popconfirm, Select, Table, message } from 'antd'
import { ColumnsType } from 'antd/es/table'
import { observer } from 'mobx-react-lite'
import React, { useEffect, useState } from 'react'

import { storeAll } from '@/store'
import { carsTypes } from '@/store/cars'
import { deleteCarsRequest, reviseCarsRequest } from '@/apis/cars'
import { useColumsSearch } from '@/hooks/useColumsSearch'
import Upload from '@/components/upload'
import { layout } from '@/utils/contants'
import { carNumberRule } from '@/utils/formRules'

const Cars: React.FC = () => {
	const [open, setOpen] = useState<boolean>(false)
	const [currentCar, setCurrentCar] = useState<carsTypes>()
	const [pic, setPic] = useState<string>('')
	const { carsStore: { cars, getCars }, usersStore: { userOptions }, parkingStore: { options, setOptions, parking, getParkingLot } } = storeAll
	const [form] = Form.useForm()
	const columns: ColumnsType<carsTypes> = [
		{
			dataIndex: 'username',
			title: '车主'
		},
		{
			dataIndex: 'number',
			title: '车牌号',
			filterSearch: true,
			...useColumsSearch<carsTypes>().getColumnSearchProps('number')
		},
		{
			dataIndex: 'phone',
			title: '车主联系方式'
		},
		{
			dataIndex: 'type',
			title: '车辆类型'
		},
		{
			dataIndex: 'position',
			title: '位置',
		},
		{
			dataIndex: 'picture',
			title: '图片',
			render: (_, record) => (
				<Image src={record.picture} className="tableAvater"></Image>
			)
		},
		{
			title: '操作',
			dataIndex: 'action',
			render: (_, record) => {
				return <>
					<Button type="primary" danger>
						<Popconfirm
							title="Delete the task"
							description="你确定要删除此车辆吗，删除后占用的车位也会变为空闲"
							okText="确定"
							cancelText="取消"
							onConfirm={() => deleteCars(record.id)}
						>
							删除
						</Popconfirm>
					</Button>
					<Button type="primary" onClick={() => { opneModal(record) }}>
						修改
					</Button>
				</>
			}
		}
	]

	useEffect(() => {
		setOptions(parking, -1)
	}, [setOptions, parking])

	const deleteCars = (id: number) => {
		deleteCarsRequest(id).then((res: any) => {
			message.success(res.message)
			getCars()
			getParkingLot()
		})
	}

	const opneModal = (record: carsTypes) => {
		setOpen(true)
		setCurrentCar(record)
		setPic(record.picture)
		setOptions(parking, 0, record.pid)
		form.setFieldsValue(record)
	}

	const onCancel = () => {
		setOpen(false)
		form.resetFields()
	}

	const onFinish = (value: any) => {
		value.picture = pic
		value.pid = Array.isArray(value.position) ? value.position[2] : currentCar?.pid
		reviseCarsRequest(value).then((res: any) => {
			message.success(res.message)
			onCancel()
			getCars()
			getParkingLot()
		})
	}

	return <div className="carsWrap">
		<Table dataSource={cars} rowKey={(record) => record.id} columns={columns}>
		</Table>
		<Modal open={open} footer={null} onCancel={onCancel} title="修改车辆">
			<Form form={form} onFinish={onFinish} {...layout}>
				<Form.Item name={['id']} label="id" style={{ display: 'none' }}>
					<Select options={userOptions} defaultValue={currentCar?.uid} />
				</Form.Item>
				<Form.Item name={['uid']} label="用户" rules={[{ required: true, message: '请选择用户' }]}>
					<Select options={userOptions} defaultValue={currentCar?.uid} />
				</Form.Item>
				<Form.Item name={['position']} label="位置" rules={[{ required: true, message: '请选择一个位置' }]}>
					<Cascader options={options}></Cascader>
				</Form.Item>
				<Form.Item name={['number']} label="车牌号" rules={[carNumberRule]}>
					<Input />
				</Form.Item>
				<Form.Item name={['picture']} label="图片">
					<Upload src={pic} getImgUrl={(url: string) => setPic(url)} />
				</Form.Item>
				<Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
					<Button type="primary" htmlType="submit">
						修改
					</Button>
				</Form.Item>
			</Form>
		</Modal>
	</div>
}

export default observer(Cars)